<template>
    <div class="address">
        <div class="addAddressButton" @click="addAddressDialogFormVisible = true">新增收货地址</div>
        <!-- 将来我们会对这里进行循环 -->
        <div class="info" v-for="(item,index) in allAddresses" :key="index">
            <div class="top">
                <span class="title">{{ item.signer_name }}</span>
                <div class="default" v-if="item.default === 1">默认地址</div>
                <div class="im">
                    <img src="@/assets/images/profile/deletex.png">
                </div>
            </div>
            <table>
                <tr>
                    <td class="table-key">收货人:</td>
                    <td class="table-value">{{ item.signer_name }}</td>
                </tr>
                <tr>
                    <td class="table-key">所在地区:</td>
                    <td class="table-value">{{ item.district }}</td>
                </tr>
                <tr>
                    <td class="table-key">收货地址:</td>
                    <td class="table-value">{{ item.signer_address }}</td>
                </tr>
                <tr>
                    <td class="table-key">手机:</td>
                    <td class="table-value">{{ item.telphone }}</td>
                </tr>
                <tr class="edit">
                    <td class="table-key"></td>
                    <td class="table-value" @click="editAddress(item.id)">编辑</td>
                </tr>
            </table>
        </div>

        <!-- 新增收获地址的弹出框 -->
        <el-dialog v-model="addAddressDialogFormVisible" title="新增收获地址" width="700" >
            <el-form :model="form">
                <el-form-item label="收货人" :label-width="formLabelWidth">
                    <el-input v-model="form.signer_name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="所在地区" :label-width="formLabelWidth">
                    <el-input v-model="form.district" autocomplete="off" />
                </el-form-item>
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                    <el-input v-model="form.signer_address" autocomplete="off" />
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                    <el-input v-model="form.telphone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="默认地址" :label-width="formLabelWidth">
                    <el-switch v-model="form.default"  class="ml-2"  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addAddressDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveNewAddress">
                        保 存
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 编辑地址弹出框 -->
        <el-dialog v-model="editAddressDialogFormVisible" title="编辑收获地址" width="700" >
            <el-form :model="editAddressInfo">
                <el-form-item label="收货人" :label-width="formLabelWidth">
                    <el-input v-model="editAddressInfo.signer_name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="所在地区" :label-width="formLabelWidth">
                    <el-input v-model="editAddressInfo.district" autocomplete="off" />
                </el-form-item>
                <el-form-item label="收货地址" :label-width="formLabelWidth">
                    <el-input v-model="editAddressInfo.signer_address" autocomplete="off" />
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                    <el-input v-model="editAddressInfo.telphone" autocomplete="off" />
                </el-form-item>
                <el-form-item label="默认地址" :label-width="formLabelWidth">
                    <el-switch v-model="editAddressInfo.default"  class="ml-2"  style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="editAddressDialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateAddressInfo">
                        更 新
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>

<script setup>
    import { ref,reactive,onMounted } from 'vue'
    import { addAddressData,getAllAddressesData,editAddressData } from '@/network/address'
    const addAddressDialogFormVisible = ref(false)
    const formLabelWidth = ref('80px')
    const form = reactive({
        signer_name:'',
        district:'',
        signer_address:'',
        telphone:'',
        default:false
        })


    const saveNewAddress = () => {
        addAddressData(form).then(res => {
            if(res == "OK"){
                alert('保存成功')
            }
            getAllAddressed()
        })
        addAddressDialogFormVisible.value = false


        //强制刷新页面
        //window.location.reload()
    }

    let allAddresses = ref([
        {   
            id:'',
            signer_name:'',
            district:'',
            signer_address:'',
            telphone:'',
            default:0
        }
    ])

    const getAllAddressed = async () => {
        const result = await getAllAddressesData()
        allAddresses.value = result

    }

    onMounted(() => {
        getAllAddressed()
    })


    //编辑收货地址逻辑
    let editAddressDialogFormVisible = ref(false)
    let editAddressInfo = reactive({
        id:'',
        signer_name:'',
        district:'',
        signer_address:'',
        telphone:'',
        default:false
    })

    const editAddress = (id) => {
        Object.assign(editAddressInfo,allAddresses.value.find(item => item.id === id))
        if(editAddressInfo.default === 1) {
            editAddressInfo.default = true
        }else {
            editAddressInfo.default = false
        }
        editAddressDialogFormVisible.value = true
    }

    const updateAddressInfo = () => {
        editAddressData(editAddressInfo).then(res => {
            getAllAddressed()

            //强制刷新
            //window.location.reload()

            editAddressDialogFormVisible.value = false
        }) 
    }



</script>

<style lang="less" scoped>
    .address {
        background-color: #fff;
        padding-top: 20px;
        padding-left: 20px;
        width: 870px;
        padding-bottom: 20px;
        .addAddressButton {
            width: 115px;
            height: 30px;
            background-color: #f0f9e9;
            text-align: center;
            line-height: 30px;
            border: 1px solid #bfd6af;
            font-weight: 700;
            &:hover {
                cursor: pointer;
            }
        }
        .info {
            margin-top: 10px;
            border: 2px solid #e6e6e6;
            width: 830px;
            height: 180px;
            .top {
                display: flex;
                justify-content: space-between;
                padding: 10px;
                .title {
                    font-size: 14px;
                    color: #666;
                }
                .default {
                    margin-left: 20px;
                    width: 55px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                    background-color: #ffaa45;
                    color:white;

                }
                .im {
                    flex: 1;
                    text-align: right;
                    img {
                    width: 16px;
                    height: 16px;
                    &:hover {
                        cursor: pointer;
                    }
                }
                }
            }
            table {
                
                margin-left: 30px;
                tr {

                td {
                    
                    padding-bottom: 10px;
                    
                }
                .table-key {
                    text-align: right;
                    color: #999999;
                }
                .table-value {
                    padding-left: 10px;
                    width: 710px;
                }
            }
            .edit {
                text-align: right;
                color: #005ea7;
                &:hover {
                    cursor: pointer;
                    color: #e2231a;
                }
            }
            }
        }
    }
</style>